<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
		<!-- 
		  1.new Vue() 创建实例对象
		-->
	</head>
	<body>
		<div id="app">
			<h3>{{name}}</h3>
			<h3>{{counter}}</h3>
			<button @click="add">++</button>
			<button @click="des">销毁</button>
		</div>
		<script type="text/javascript">
			let vm = new Vue({
				el: '#app',
				data: {
					name: '张三',
					counter: 0
				},
				methods: {
					add() {
						this.counter++
					},
					des(){
						//销毁
						this.$destroy()
					}
				},
				//在实例初始化之后,数据观测和事件配置之前被调用,不能访问到data中的数据以及method中的方法
				beforeCreate() {
					console.log("beforeCreate")
					// console.log(this.name)

				},
				//在实例创建完成后,数据观测和事件配置已完成,可以访问到data中的数据以及method中的方法,但是el不可见
				created() {
					console.log("created")
					// console.log(this)
					// console.log(this.name)

				},
				//在挂载开始前被调用
				beforeMount() {
					console.log("beforeMount")
				},
				//el被新创建的vm.$el替换,挂载到实例上后调用此函数，发送ajax请求
				mounted() {
					console.log("mounted")
					// debugger
				},
				//数据变更时调用,可以访问变化之前的虚拟DOM
				beforeUpdate() {
					console.log("beforeUpdate")
				},
				//由于数据变更导致虚拟DOM重写渲染时调用
				updated() {
					console.log("updated")
				},
				//实例销毁前调用
				beforeDestroy() {
					console.log("beforeDestroy")
				},
				//实例销毁后调用
				destroyed() {
					console.log("destroyed")
				}

			})
		</script>
	</body>
</html>
